<template>
    <div class="Backstage">
        <el-container style="height: 90vh">
            <el-aside width="20vw">
                <el-scrollbar>
                    <el-menu :default-openeds="['1']" default-active="1-1" active-text-color="#ffa500">
                        <el-sub-menu index="1">
                            <template #title>
                                用户管理
                            </template>
                            <el-menu-item-group>
                                <el-menu-item @click="choice(0)" index="1-1">管理员</el-menu-item>
                                <el-menu-item @click="choice(1)" index="1-2">普通用户</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                文章管理
                            </template>

                            <el-menu-item @click="choice(2)" index="2-1">文章记录</el-menu-item>

                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>

                                媒体管理
                            </template>
                            <el-menu-item-group>
                                <el-menu-item @click="choice(3)" index="3-1">音频</el-menu-item>
                                <el-menu-item @click="choice(4)" index="3-2">视频</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>
                                其它管理
                            </template>
                            <el-menu-item-group>
                                <el-menu-item @click="choice(5)" index="4-1">留言</el-menu-item>
                                <el-menu-item @click="choice(6)" index="4-2">相册</el-menu-item>
                                <el-menu-item @click="choice(7)" index="4-3">说说</el-menu-item>
                                <el-menu-item @click="choice(8)" index="4-4">评论</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-container>
                <el-header style="padding: 1vw;">{{ title }}</el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
const router = useRouter()
const route = useRoute()
const title = ref('')
onMounted(() => {

})
const backstage = [
    {
        title: '用户管理/管理员',
        path: '/back/users/admin'
    },
    {
        title: '用户管理/普通用户',
        path: '/back/users/user'
    },
    {
        title: '文章管理/文章记录',
        path: '/back/article/blog'
    }, {
        title: '媒体管理/音频',
        path: '/back/media/music'
    },
    {
        title: '媒体管理/视频',
        path: '/back/media/video'
    },
    {
        title: '其它管理/留言',
        path: '/back/other/message'
    },
    {
        title: '其它管理/相册',
        path: '/back/other/albums'
    },
    {
        title: '其它管理/说说',
        path: '/back/other/speaks'
    },
    {
        title: '其它管理/评论',
        path: '/back/other/discuss'
    },
]

const choice = (id: number) => {
    title.value = backstage[id].title
    router.push(backstage[id].path)
}
</script>

<style lang="scss" scoped>
.Backstage {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);

    :deep(.el-menu) {
        background-color: rgba(255, 255, 255, 0.5);
    }

    :deep(.el-menu--inline) {
        background-color: rgba(255, 255, 255, 0.8);

    }
}
</style>